<template>
	<div class="padding-across-10">
		<headerOpreate style="padding-bottom: 3px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div class="list">
			<p class="panel_title">区域列表</p>
			<el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
			</el-tree>
		</div>
		<div id="divPicker" style="width: 83%;float: right"></div>
	</div>
</template>
<script>
	import headerOpreate from '../../../../components/headerOpreate'
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import Kalendae from 'Kalendae'
	var picker = null;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				districtForm: {
					name: '',
					districtid: ''
				},
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
				defaultExpandedKeys: [],
				selectDates: [],
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},
					{
						show: true,
						type: "primary",
						size: "small",
						icon: "el-icon-eleg-icon_drive",
						name: this.$t('message.save'),
						action: "saveSubmit"
					},
					{
						show: true,
						type: "danger",
						size: "small",
						icon: "el-icon-delete2",
						name: this.$t('message.removeAllSave'),
						action: "clearAllAndSave"
					}
				]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleNodeClick(data) {
				this.districtForm.name = data.Name;
				this.districtForm.districtid = data.DistrictKeyId;
				$("#divPicker").html("");
				this.getHolidayData();
			},
			saveSubmit() {
				HttpServer.httpPost.call(this, '/Api/DateExclude/Put', {
					DistrictId: this.districtForm.districtid,
					Dates: picker.getSelectedAsText(),
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.$notify({
						title: '成功',
						message: this.$t('message.saveSuccess'),
						type: 'success',
						duration: 2500
					});
					$("#divPicker").html("");
					this.getHolidayData();
				});
			},
			clearAllAndSave() {
				this.$confirm(this.$t('message.clearAllSelectionAlert'), this.$t('message.warning'), {
					confirmButtonText: this.$t('message.yes'),
					cancelButtonText: this.$t('message.no'),
					type: 'warning'
				}).then(() => {
					var parmas = {
						Dates: []
					};
					HttpServer.httpPost.call(this, '/Api/DateExclude/Put', {
						DistrictId: this.districtForm.districtid,
						Dates: [],
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.$notify({
							title: '成功',
							message: this.$t('message.operationSuccess'),
							type: 'success',
							duration: 2500
						});
						$("#divPicker").html("");
						this.getHolidayData();
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});

			},
			//刷新
			reloadDatas() {
				HttpServer.httpGet.call(this, '/Api/DateExclude/' + this.districtForm.districtid, function(response) {}, function(response) {
					// console.log(response)
					if(response.data.code === 0) {
						this.selectDates = response.data.data === null ? [] : response.data.data;
						picker = new Kalendae({
							attachTo: "divPicker",
							months: 12,
							mode: 'multiple',
							selected: this.selectDates
						});
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			getHolidayData() {
				HttpServer.httpGet.call(this, '/Api/DateExclude/' + this.districtForm.districtid, function(response) {}, function(response) {
					// console.log(response)
					if(response.data.code === 0) {
						this.selectDates = response.data.data === null ? [] : response.data.data;
						// console.log(this.selectDates)
						picker = new Kalendae({
							attachTo: "divPicker",
							months: 12,
							mode: 'multiple',
							selected: this.selectDates
						});
					} else {
						picker = new Kalendae({
							attachTo: "divPicker",
							months: 12,
							mode: 'multiple',
							selected: []
						});
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			sortDatas(arr) {
				for(var i=0;i<arr.length;i++){
					for(var j = i + 1;j<arr.length;j++){
						if(arr[i].DistrictKeyId>arr[j].DistrictKeyId){
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			//默认查询,用于左侧树状图展示
			getDatas() {
				//查询用户绑定区域
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + parseInt(GloabFun.getKeyId()), function(response) {}, function(response) {
					if(response.data.code === 0) {
						if(response.data.info.length > 0) {
							this.districtsDatas = this.sortDatas(response.data.info);
							this.defaultExpandedKeys.push(this.districtsDatas[0].DistrictKeyId);
							this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
							//默认查询第一个区域下的设备
							this.districtForm.name = this.districtsDatas[0].Name;
							this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
							this.getHolidayData();
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
		},
		created() {
			// console.log(111,this.templateObj)
			this.getDatas();
		}
	}
</script>
<style scoped>
	@import "../../../../../node_modules/kalendae/build/kalendae.css"
</style>
<style scoped lang="less">
	.kalendae .k-separator {
		width: 10px !important;
	}
	
	.list {
		height: 500px;
		// max-height:580px;
		width: 16%;
		float: left;
		overflow: auto;
		// padding-top: 10px;
		// background-color: #324157;
		margin-bottom: 10px;
		.panel_title {
			height: 28px;
			line-height: 28px;
			font-size: 15px;
			text-align: center;
			border: 1px solid #E0E0E0;
			border-radius: 5px;
			color: #fff;
			background-color: #324157;
		}
		// color:#fff
	}
</style>